<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <fieldset>
        <legend>01.图片上传简版</legend>
        <!-- 
            浏览器：自动打开文件管理器
            手机：弹出相机或文件管理器
            accept:打开系统文件目录
            capture:系统所捕获的默认设备,camera:照相机；camcorder:摄像机；microphone:录音
            multiple:多选,multiple优先级高于capture
        -->
        <input accept="image/*" type="file" onchange="loadPic()" id="loadPic">
        <input accept="video/*" type="file" capture="camera" id="loadAVI">

        <!-- 这里回显图片 -->
        <img id="image">

        <script>
            function loadPic(){
                // var oFile = document.getElementById('loadPic');
                // console.log(oFile);//<input accept="image/*" type="file" onchange="loadPic()" id="loadPic">
                
                // var oFile = document.getElementById("loadPic").files;
                // console.log(oFile);//FileList {0: File, length: 1}对象
        
                var oFile = document.getElementById("loadPic").files[0];
                console.log(oFile);//file对象
        
                var reader = new FileReader();
                console.log(reader);//FileReader对象{error: null, onabort: null, onload: null, onloadstart: null, onprogress: null, readyState: 0, result: null}
        
                reader.readAsDataURL(oFile);//该方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 onload 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容
                console.log(reader);//此时result属性值为图片的base64编码
        
                reader.onload = function(){
                    document.getElementById('image').setAttribute("src",reader.result);//这里回显图片
                }
            }
        </script>
    </fieldset>

    <fieldset>
        <legend>02.图片上传plus版</legend>
        <input accept="image" type="file" onchange="loadPicPlus()" id="loadPicPlus"> <!-- 手机与PC效果不一样,手机中还可以选择相机 -->

        <script>
            function loadPicPlus(){
                let oFile = document.getElementById('loadPicPlus').files[0];
                let reader = new FileReader();
                reader.readAsDataURL(oFile);
                reader.onload = function(){
                    let img = new Image();//img对象有好多属性
                    //img.src = this.result;//此处的this指代reader对象

                    //1B（byte，字节）= 8 bit；1KB（Kilobyte，千字节）=1024B= 2^10 B；1024个字节长度就是1024
                    //因为是base64编码,且1024个字节=1K,所以此处可以通过字节的长度判断文件大小
                    if(this.result.length<=100*1024){//100*1024=100K
                        //直接展示
                        return;
                    }

                    //图片加载完之后触发此事件,也有使用if(img.complete){callback}else{img.onload=callback}的待验证
                    img.onload=function(){
                        let base64Str = compress(this);//此处this指代img
                    }
                }
            }

            //图片压缩
            //图片的“长宽”并非物理意义的长度单位，而是在图片“横”和“竖”这两个维度上包含的像素个数
            function compress(img){
                let initSize = img.src.length;//根据字节长度可以获取大小
                let width = img.width;//图片加载完成之后,才能获取大小[也就是需要在img.onload()方法执行完毕之后获取]
                let height = img.height;//需要在img.onload()方法执行完毕之后获取

                let bili =1;//意义是什么？
                if(width>480){
                    bili = 480/width;
                }else{
                    if(height>640){
                        bili = 640/height;
                    }
                }

                //计算压缩比,并将大小压至400万以下
                let ratio;//比率的意思
                if((ratio= width * height /4000000) >1){
                    
                }

            }
        </script>
    </fieldset>
</body>
</html>